<template>
    <div class="publish-container">
        <div>
            <div v-if="!publishStatus" class="publish-btn-view">
                <el-button
                    class="publish-btn"
                    size="medium"
                    type="primary"
                    @click="publishProject"
                >
                    <i class="el-icon-document-checked el-icon--right">开始发布</i>
                </el-button>
            </div>
            <div v-if="publishStatus" class="publish-finish-view">
                <el-row align="middle" type="flex">
                    <el-col :span="6">
                        <div>
                            <vue-qr v-if="writeLink" :callback="qrCodeGenSuccess" :size="194"
                                    :text="writeLink"
                            />
                        </div>
                        <div style="text-align: center;">
                            <el-link type="primary" @click="()=>{
                                this.downloadFile('qrcode.png',this.qrCodeUrl)
                            }"
                            >
                                下载分享二维码
                            </el-link>
                        </div>
                    </el-col>
                    <el-col style="margin-left: 75px;line-height: 50px">
                        <div style="display: flex; justify-content: center;">
                            <div class="icon-view">
                                <i class="el-icon-check success-icon" />
                            </div>
                        </div>
                        <div>
                            <p class="success-title">恭喜您，发布成功！</p>
                        </div>
                        <div>
                            <p class="link-text"  v-clipboard:copy="writeLink"
                               v-clipboard:error="()=>{this.$modal.msgError('复制失败')}"
                               v-clipboard:success="()=>{this.$modal.msgSuccess('复制成功')}"> {{ writeLink }}</p>
                        </div>
                        <el-row>

                          <el-col :offset="3"  :span="10">
                            <el-button
                              type="warning"
                              @click="toProjectPageHandle"
                            >
                              查看表单
                            </el-button>
                          </el-col>

                <!--          <el-col :span="6">
                              <el-button v-clipboard:copy="writeLink"
                                         v-clipboard:error="()=>{this.$modal.msgError('复制失败')}"
                                         v-clipboard:success="()=>{this.$modal.msgSuccess('复制成功')}" type="primary"
                              >
                                  复制链接
                              </el-button>
                          </el-col>-->

                          <el-col :span="10">
                            <el-button
                              type="danger"
                              @click="stopPublishProject"
                            >
                              停止发布
                            </el-button>
                          </el-col>
                        </el-row>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
import VueQr from 'vue-qr'
import {queryFormProjectResByProjectId, updateFormProjectStatusByProjectId} from '@/api/form/formProject'
export default {
    name: 'ProjectPublish',
    components: {
        VueQr
    },
    data() {
        return {
            publishStatus: false,
            projectId: null,
            writeLink: '',
            qrCodeUrl: ''
        }
    },
    mounted() {
        this.projectId = this.$route.query.key
        let url = window.location.protocol + '//' + window.location.host
        this.writeLink = `${url}#/m/${this.projectId}`
        this.getProjectStatus()
    }, methods: {
        getProjectStatus() {
          // 获取表单配置
          queryFormProjectResByProjectId({"projectId":this.projectId}).then(res => {
              let data = res.data
              this.publishStatus = data.statusCode !== 'FORM_PROJECT_UNPUBLISHED';
            }
          )
        },
        publishProject() {
          updateFormProjectStatusByProjectId({"projectId":this.projectId}).then(res => {
              if (res) {
                this.publishStatus = true
                this.$modal.msgSuccess('发布成功')
              }
            }
          )
        },
        stopPublishProject() {
          updateFormProjectStatusByProjectId({"projectId":this.projectId}).then(res => {
              if (res) {
                this.publishStatus = false
                this.getProjectStatus()
                this.$modal.msgSuccess('停止成功')
              }
            }
          )
        },
        qrCodeGenSuccess(dataUrl) {
            this.qrCodeUrl = dataUrl
        },
        downloadFile(fileName, content) {
            let aLink = document.createElement('a')
            let blob = this.base64ToBlob(content) // new Blob([content]);
            let evt = document.createEvent('HTMLEvents')
            evt.initEvent('click', true, true)// initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
            aLink.download = fileName
            aLink.href = URL.createObjectURL(blob)
            // aLink.dispatchEvent(evt);
            aLink.click()
        },
        // base64转blob
        base64ToBlob(code) {
            let parts = code.split(';base64,')
            let contentType = parts[0].split(':')[1]
            let raw = window.atob(parts[1])
            let rawLength = raw.length
            let uInt8Array = new Uint8Array(rawLength)
            for (let i = 0; i < rawLength; ++i) {
                uInt8Array[i] = raw.charCodeAt(i)
            }
            return new Blob([uInt8Array], {type: contentType})
        },
        toFeedbackPageHandle() {
            this.$router.replace({path: '/project/form/statistics', query: {key: this.projectId}})
        },
        toProjectPageHandle() {
          window.open(this.writeLink,'_blank') // 在新窗口打开外链接
        }
    }

}
</script>

<style lang="scss" scoped>
.publish-container {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    background-color: #f7f7f7;
    min-height: 84vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.publish-finish-view {
    /*width: 500px;*/
    height: 200px;
    text-align: center;
    .icon-view {
        width: 59px;
        height: 59px;
        border-radius: 100px;
        background-color: #0076ff;
        display: flex;
        align-items: center;
        align-content: center;
        justify-items: center;
        justify-content: center;
    }
    .success-icon {
        text-align: center;
        color: white;
        font-size: 30px;
    }
    .success-title {
        color: rgba(16, 16, 16, 100);
        font-size: 28px;
    }
    .link-text {
        color: rgba(16, 16, 16, 100);
        font-size: 14px;
    }
}

</style>
